<template>
  <div id="myform">
    <group>
      <div v-for="(item, index) in formdata.fields">
        <div class="vux-cell-box">
          <!--标题-->
          <x-input v-if="item.type==='header'" :title='item.label' disabled></x-input>

          <!--输入框开始-->
          <!--文本输入框-->
          <x-input v-if="item.type === 'text'&&item.subtype === 'text' " type="text" :title='item.label'
                   :placeholder="item.placeholder" placeholder-align="right"
                   text-align="right" v-model='fromDataArray[index].fromData'></x-input>
          <!--密码输入框-->
          <x-input v-if="item.type === 'text'&&item.subtype === 'password'  " type="password" :title='item.label'
                   :placeholder="item.placeholder" placeholder-align="right"
                   text-align="right" v-model='fromDataArray[index].fromData'></x-input>
          <!--邮箱输入框-->
          <x-input v-if="item.type === 'text'&&item.subtype === 'email' " is-type="email" type="email"
                   :title='item.label' :placeholder="item.placeholder" placeholder-align="right"
                   text-align="right" v-model='fromDataArray[index].fromData'></x-input>
          <!--电话输入框-->
          <x-input v-if="item.type === 'text'&&item.subtype === 'tel' " is-type="china-mobile" type="tel"
                   :title='item.label' :placeholder="item.placeholder" placeholder-align="right"
                   text-align="right" v-model='fromDataArray[index].fromData'></x-input>

          <!--段落-->
          <x-textarea v-if="item.type === 'paragraph'" :max="item.maxlength" :placeholder="item.placeholder"
                      v-model='fromDataArray[index].fromData'></x-textarea>

          <!--多文本输入框-->
          <x-textarea v-if="item.type === 'textarea'" :max="item.maxlength" :placeholder="item.placeholder"
                      v-model='fromDataArray[index].fromData'></x-textarea>


          <!--输入框结束-->


          <!--数字输入-->
          <x-number :title="item.label" v-if="item.type === 'number'" :min="getNumber(item.min)"
                    :max="getNumber(item.max)" :step="getNumber(item.step)"
                    v-model='fromDataArray[index].fromData'></x-number>

          <!--单选框-->
          <popup-radio v-if="item.type === 'radio-group'" :title="item.label" :options="transformKey(item.values)"
                       :placeholder="item.placeholder" v-model='fromDataArray[index].fromData'></popup-radio>

          <!--多选框-->
          <checklist v-if="item.type === 'checkbox-group'" :title="item.label"
                     :options="transformKey(item.values)" v-model='fromDataArray[index].fromData'></checklist>


          <!--日期-->
          <datetime v-if="item.type === 'date'" start-date="1960-01-01" end-date="2000-02-02" :title="item.label"
                    :placeholder="item.placeholder" v-model='fromDataArray[index].fromData'></datetime>

          <!--地址-->
          <x-address v-if="item.type === 'address' " title="地址" :list="addressData" placeholder="请选择地址"
                     v-model='fromDataArray[index].fromData'></x-address>

          <!--文件上传-->
          <div class="flieWrapper" v-if="item.type === 'file'" @click="fileUp($event,index)" ref="file">
            <div>
              <p>上传文件</p>
            </div>
            <input @change="fileChange($event,index)" class="upload" type="file"/>
          </div>

        </div>

      </div>
    </group>
  </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable*/
  import {
    Group,
    Cell,
    XButton,
    XInput,
    Datetime,
    PopupRadio,
    ToastPlugin,
    Scroller,
    XNumber,
    XTextarea,
    Checklist,
    XAddress,
    ChinaAddressV4Data
  } from 'vux'

  export default {
    props: {
      formdata: {
        type: Object,
        required: true
      }
    },
    data () {
      return {
        bloodType: '',
        birthDate: '',
        addressData: ChinaAddressV4Data,
        fromDataArray: []
      }
    },
    created () {
      
      let _this = this
      this.formdata.fields.forEach(function (item, index) {
        let obj = {}
        _this.fromDataArray.push(obj)
      })
    },
    methods: {
      getNumber (str) {
        return str | 0
      },
      transformKey (array) {
        array.forEach((item, index) => {
          item.key = item.label
          delete item.label
        })
        return array
      },
      fileUp (event, index) {
        // if(event.target=='')
        // console.log(event.target[0] === 'div')
        event.currentTarget.children[1].click()
      },
      fileChange (event, index) {
        // console.log(this.$refs.file)
        console.log(event.target.files[0])
        event.target.parentNode.children[0].innerHTML = `<p>文件名：${event.target.files[0].name}  大小：${((event.target.files[0].size / 1024 / 1024 * 100) | 0) / 100}M</p>`
        // console.log(this.getIndex(event.target))
      },
      getIndex (element) {
        return Array.prototype.slice.call(document.querySelectorAll('input[type="file"]')).indexOf(element)
      }
    },
    components: {
      Group,
      Cell,
      XButton,
      XInput,
      Datetime,
      PopupRadio,
      ToastPlugin,
      Scroller,
      XNumber,
      XTextarea,
      Checklist,
      XAddress
    }
  }
</script>


<style lang="less" rel="stylesheet/less">
  #myform .vux-header .vux-header-title {
    text-align: left;
  }

  #myform .weui-cells__title {
    padding-top: 11px;
    padding-bottom: 10px;
    padding: 10px;
  }

  #myform .flieWrapper {
    padding: 10px;
    width: 100%;
    padding: 10px;
    button {
      font-size: 16px;
    }
  }

  #myform .upload {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    display: none;
  }

  #myform .button-wrapper {
    margin-top: 30px;
  }

</style>



